Vue指令 v

2023-12-01 12:36| 来源: 网络整理| 查看: 265

4 、v-for遍历 4.1 遍历数组中的对象

格式：v-for="item in list"

里面也可以返回下标

格式：v-for="（item.index） in list"

item:可以自定义变量这个值，但是里面的 {{item.id}}中的item需要跟自定义的这个值一致

{{item.id}}---{{item.name}}---{{item.age}} let vue = new Vue({ el: "#app", data: { list: [ { id: 1, name: "张狗", age: 88 }, { id: 2, name: "舔狗", age: 20 }, { id: 3, name: "藏獒", age: 10 }, { id: 4, name: '狼狗', age: 18 } ], }

在这里插入图片描述

4.2 遍历对象的属性值

格式：v-for="key in list"

4.3 遍历对象的属性和属性值

格式：v-for="（key，value） in list"

4.4 遍历数字 {{n}}

在这里插入图片描述

4.5 内置set

以下变动的数组中， Vue 是不能检测到的，也不会触发视图更新：

通过索引直接设置项，比如 app.books[3] = { … }. 修改数组长度，比如叩p.books.length = 1. 为了解决这个问题Vue为我们提供了一个set方法。格式：

Vue.set(该数组,下标,{ // 更新或需要的内容 })

以下代码是小练习，实现了升序、降序、增加、更改（更新）

id ： name： age： {{n}} 增加更新 {{p.id}}---{{p.name}}---{{p.age}} 按照年龄升序按照年龄降序 let vue = new Vue({ el: "#app", data: { list: [ { id: 1, name: "张狗", age: 88 }, { id: 2, name: "舔狗", age: 20 }, { id: 3, name: "藏獒", age: 10 }, { id: 4, name: '狼狗', age: 18 } ], id:"", name:"", age:"", }, methods: { // 添加 add() { let arry = {id:this.id,name:this.name,age:this.age}; this.list.push(arry); }, // 更新 update() { Vue.set(this.list,this.id-1,{ id:this.id, name:this.name, age:this.age, }) }, change(num) { if (num == 1) { this.list.sort((v1, v2) => { return v1.age - v2.age }) } else { this.list.sort((v1, v2) => { return v2.age - v1.age }) } } } });

实现新增在这里插入图片描述实现更新升序的实现，降序的实现